<!--
    NoticeCell.vue
    gree_ctm

    Created by 汪明 on 18:05.
 -->
<template>
    <view class="NoticeCell" v-if="companyLetters.length > 0">
        <image style="height: 15px;margin-left: 12px" mode="heightFix"
               src="https://fmall.gree.com/distributionh5/static/img/newsQuick.be201ab5.png"></image>
        <swiper class="gree_notice_swiper" :autoplay="true" :vertical="true">
            <swiper-item v-for="(item,index) in companyLetters" :key="item.id">
                <view style="display: flex;flex-direction: row;align-items: center">
                    <view class="latest_view" v-show="index == 0">最新</view>
                    <view class="title_view">{{ item.title }}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
import type {CompanyLetter} from "@/Types/HomeTypes";

const props = defineProps<{
    companyLetters:CompanyLetter[]
}>()
</script>

<style scoped lang="scss">
.NoticeCell {
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  height: 45px;

  .gree_notice_swiper {
    flex: 1;
    height: 100%;

    .latest_view {
      background-color: rgb(255, 177, 40);
      color: white;
      font-size: 12px;
      width: 35px;
      text-align: center;
      border-radius: 2px;
      height: 17px;
      line-height: 17px;
      margin-left: 12px;
    }

    .title_view {
      padding-left: 12px;
      height: 45px;
      line-height: 45px;
      font-size: 12px;
      color: black;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
